<template>
  <div class="menu-wrapper">
    <template v-for="(child, cindex) in menu">
      <div :key="cindex" v-if="child.meta && child.meta.isSidebar">
        <el-menu-item
          v-if="validatenull(child[childrenKey])"
          :index="child[pathKey]"
          @click="open(child)"
        >
          <template slot="title">
            <i :class="child[iconKey] || 'el-icon-location'"></i>
            <span>{{ child.name }}</span>
          </template></el-menu-item
        >
        <el-submenu :index="child[pathKey]" v-else>
          <template slot="title">
            <i :class="child[iconKey] || 'el-icon-location'"></i>
            <span v-if="!isCollapse">{{ child.name }}</span>
          </template>
          <sidebar-item :menu="child[childrenKey]"></sidebar-item>
        </el-submenu>
      </div>
    </template>
  </div>
</template>
 
<script>
import config from "./config.js";
import website from "@/config/website.js";

export default {
  name: "sidebarItem",
  props: {
    menu: {
      type: Array,
    },
    isCollapse: {
      type: Boolean,
    },
  },
  data() {
    return {
      config: config,
      props: website.menuKeyS.props,
    };
  },
  computed: {
    pathKey() {
      return this.props.path || this.config.propsDefault.path;
    },
    iconKey() {
      return this.props.icon || this.config.propsDefault.icon;
    },
    childrenKey() {
      return this.props.children || this.config.propsDefault.children;
    },
  },
  methods: {
    open(item) {
      console.log(item);
      this.$router.push(item[this.pathKey]);
    },
    validatenull(val) {
      if (val == undefined || val == "" || val.length == 0) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
 
<style scoped lang = "less">
</style>